.dx-size-default() {
    @GENERIC_ACCORDION_TITLE_PADDING: 9px 12px;
    @GENERIC_ACCORDION_BODY_PADDING: 8px 12px 22px;

    @GENERIC_ACCORDION_ARROW_LINE_HEIGHT: 24px;
}

.dx-size-compact() {
    @GENERIC_ACCORDION_TITLE_PADDING: 5px 7px;
    @GENERIC_ACCORDION_BODY_PADDING: 3px 7px 12px;

    @GENERIC_ACCORDION_ARROW_LINE_HEIGHT: 21px;
}

@GENERIC_ACCORDION_DISABLED_OPACITY: .5;


.dx-accordion {
    color: @accordion-color;
}

.dx-accordion-item {
    border: 1px solid transparent;
    border-top-color: @accordion-item-border-color;

    &:last-child {
        border-bottom: 1px solid @accordion-item-border-color;
    }

    &.dx-state-active:not(.dx-accordion-item-opened) {
        .dx-icon {
            color: @accordion-icon-active-color;
        }

        & > .dx-accordion-item-title {
            color: @accordion-title-active-color;
            background-color: @accordion-title-active-bg;
        }
    }

    &.dx-state-hover {
        & > .dx-accordion-item-title {
            background-color: @accordion-item-hover-bg;
        }

        &:not(:last-child):not(.dx-accordion-item-opened):not(.dx-state-focused) {
            border-bottom-color: @accordion-item-hover-bg;
        }
    }
}

.dx-accordion-item-opened {
    border-color: @accordion-item-border-color;

    &.dx-state-hover {
        & > .dx-accordion-item-title {
            background-color: @accordion-item-title-opened-bg;
        }
    }

    & > .dx-accordion-item-title {
        background-color: @accordion-item-title-opened-bg;

        &:before {
            content: "\f014";
        }
    }

    + .dx-accordion-item {
        border-top-color: transparent;

        &.dx-state-hover:not(.dx-state-focused) {
            border-top-color: @accordion-item-hover-bg;
        }
    }
}

.dx-accordion-item-title {
    color: @accordion-title-color;
    padding: @GENERIC_ACCORDION_TITLE_PADDING;
    font-size: @GENERIC_S_FONT_SIZE;

    &:before {
        font-weight: normal;
        color: @accordion-icon-color;
        content: "\f016";
        font-family: DXIcons;
        font-size: @GENERIC_BASE_ICON_SIZE;
        margin-left: @GENERIC_BASE_ICON_SIZE/2;
        margin-right: 0;
        line-height: @GENERIC_ACCORDION_ARROW_LINE_HEIGHT;
    }

    .dx-icon {
        .dx-icon-sizing(@GENERIC_BASE_ICON_SIZE);
        .dx-icon-margin(@GENERIC_BASE_ICON_SIZE/2);
        display: inline-block;
        color: @accordion-icon-color;
    }
}

.dx-state-disabled {
    &.dx-accordion-item {
        opacity: @GENERIC_ACCORDION_DISABLED_OPACITY;
    }
}

.dx-state-focused {
    &.dx-accordion-item {
        border-color: @accordion-item-focused-border-color;
    }
}

.dx-accordion-item-body {
    padding: @GENERIC_ACCORDION_BODY_PADDING;
    font-size: @GENERIC_BASE_FONT_SIZE;
}

.dx-rtl {
    .dx-accordion-item-title {
        &:before {
            margin-left: 0;
            margin-right: @GENERIC_BASE_ICON_SIZE/2;
        }
    }
}
